<template>
    <div class="personal-list-page">
        <div class="personal-list" v-for="(item,index) in personalList" :key="index">
            <div class="person-list-describe">
                <div class="personal-list-left">
                    <div class="personal-list-left-img">
                        <img v-if="item.imagePath" :src="item.imagePath" alt>
                        <img v-else src="../../assets/img/1.jpg"/>
                    </div>
                    <div class="personal-list-left-describe">
                        <div class="left-describe-top">
                            <div class="left-describe-top-name">{{item.userName}}</div>
                            <el-popover placement="top-start"
                                        :width="$pop.licenseWidth"
                                        trigger="hover"
                                        :disabled="$pop.getLicensesString(item.resumeJson.licenseList).all.length===0">
                                <p v-for="(lt,li) in $pop.getLicensesString(item.resumeJson.licenseList).all" :key="li">
                                    {{lt}}</p>
                                <div slot="reference" style="margin-left:20px">
                                    {{$pop.getLicensesString(item.resumeJson.licenseList).first}}
                                </div>
                            </el-popover>
                            <div style="margin-left:20px">当前年薪：{{item.tax===0?'税前':'税后'}}<span
                                    style="color: rgba(255, 115, 0, 1)">{{item.salaryPerMonth}}W/{{item.monthCount}}年</span>
                            </div>
                        </div>
                        <div class="left-describe-bottom">
                            <span>{{item.city}}</span>
                            <span>|</span>
                            <span>{{item.age}}岁</span>
                            <span>|</span>
                            <span>{{item.workDayStr}} 年</span>
                            <span>|</span>
                            <span>{{item.jobStateStr}}</span>
                        </div>
                    </div>
                </div>
                <div>
                    <div>
                        <div style="margin:0 0 10px 0;">
                            <el-button class="inappropriate-button" v-if="item.relationshipState != 4"
                                       @click="doInappropriate(item)">不合适
                            </el-button>
                            <el-button class="applied-button" v-if="item.relationshipState == 4">不合适</el-button>
                        </div>
                        <el-button :disabled="item.relationshipState==4" class="apply-button"
                                   v-if="item.applyComminication == 0" @click="doapply(item)">
                            申请沟通
                        </el-button>
                        <el-button class="applied-button" v-if="item.applyComminication != 0">已申请</el-button>
                    </div>
                </div>
            </div>
            <div class="person-list-intention">
                <el-button class="look-report-button" v-if="item.report == 1" @click="showReport(item)">查看推荐报告
                </el-button>
                <span v-if="item.report == 1" class="talents-intention">
          当前人才意向：
          <span class="talents-intention-have">{{item.inputIntertion == 1?'有':'无'}}</span>
        </span>
            </div>
        </div>

        <el-dialog class="dialog-report" :title="titleInfo" :visible.sync="dialogVisible">
            <resume-dialog :item="item"></resume-dialog>
        </el-dialog>
    </div>
</template>

<script>
  import resumeDialog from './resume-dilog'
  import _g from '../../assets/utils/global'
  import * as _ from 'underscore'

  export default {
    props: ['nowPage', 'jobId'],
    data() {
      return {
        dialogVisible: false,
        personalList: [],
        currPageNo: 1,
        jId: 0,
        titleInfo: '',
        item: ''
      }
    },
    methods: {
      showReport(item) {
        this.titleInfo = item.userName + '的推荐报告'
        this.dialogVisible = true
        this.item = item
      },
      doInappropriate(item) {
        _g.apiPost('/company/updateAppropriate.do', { relationshipId: item.jrrId, state: 2, value: 4 }).then(res => {
          if (res.status == 0) {
            this.getRelashipInfo()
          }
          _g.toMessage({
            status: res.status,
            msg: res.msg
          })
        })
      },
      doapply(item) {
        _g.apiPost('/company/updateAppropriate.do', { relationshipId: item.jrrId, state: 1, value: 1 }).then(res => {
          if (res.status == 0) {
            this.getRelashipInfo()
          }
          _g.toMessage({
            status: res.status,
            msg: res.msg
          })
        })
      },
      getRelashipInfo() {
        console.log('get relationship info')
        this.showlable = localStorage.getItem('job_List_type')//推荐状态
        let state = Number(this.showlable) === 0 ? (this.showlable + ',1@@') : this.showlable + '@@'
        _g.apiPost('/company/selectResumeByJobId.do', {
          currPageNo: this.currPageNo,
          pageSize: 10,
          state: state,
          jobId: this.jId
        }).then(res => {
          if (res.status == 0) {
            console.log('selectResumeByJobId', res.data.list, 2)
            this.personalList = res.data.list
            this.$emit('getTotal', res.data.total)
          } else {
            _g.toMessage({
              status: res.status,
              msg: '查询失败'
            })
          }
        })
      }
    },
    components: {
      resumeDialog
    },
    created() {
      this.jId = localStorage.getItem('job_List_jobId')
      this.getRelashipInfo()
    },
    watch: {
      jobId(val) {
        this.jId = val
        this.getRelashipInfo()
      },
      nowPage(val) {
        this.currPageNo = val
        this.getRelashipInfo()
      }
    }
  }
</script>

<style lang="scss" scoped>
    .personal-list-page {
        margin: 20px 0;
        width: 980px;
        min-height: 100px;
        background: #fff;

        .personal-list {
            padding: 0 50px;
            width: 100%;
            max-height: 164px;
            box-sizing: border-box;
            border-bottom: 1px solid #eee;

            &:hover {
                background: #f7fdff;
            }

            .person-list-describe {
                padding: 25px 0 0 0;
                width: 100%;
                height: 111px;
                display: flex;
                justify-content: space-between;
                box-sizing: border-box;

                .personal-list-left {
                    margin: 5px 0 0 0;
                    display: flex;
                    justify-content: space-around;

                    .personal-list-left-img {
                        margin: 0 20px 0 0;

                        img {
                            height: 51px;
                        }
                    }

                    .personal-list-left-describe {
                        width: fit-content;

                        .left-describe-top {
                            width: fit-content;
                            display: flex;
                            justify-content: flex-start;
                            align-items: flex-end;
                            font-size: 14px;
                            font-weight: 400;
                            color: #333;

                            .left-describe-top-name {
                                font-size: 18px;
                            }
                        }

                        .left-describe-bottom {
                            margin: 10px 0 0 0;
                            display: flex;
                            justify-content: flex-start;
                            font-size: 14px;
                            font-weight: 400;
                            color: #999;

                            span {
                                margin-right: 15px;
                            }
                        }
                    }
                }
            }

            .person-list-intention {
                padding: 13px 0 0 0;
                width: 100%;
                height: 53px;
                box-sizing: border-box;
                border-top: 1px solid #f3f3f7;

                .talents-intention {
                    margin: 0 0 0 30px;
                    font-size: 14px;
                    color: #666666;

                    .talents-intention-have {
                        font-weight: bold;
                        color: #4ab0cf;
                    }

                    .talents-intention-not {
                        font-weight: bold;
                    }
                }
            }
        }
    }
</style>
